<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.  .stop修饰符的使用
          阻止事件冒泡，也就是说当按钮外div也有监听时，想只执行按钮得加stop
           否则会一起被监听使用-->
  <div v-on:click="divClick">
    {{message}}
    <button v-on:click.stop="btnClick">按钮</button>
  </div>

<!--  2.   .prevent修饰符的使用-->
  <form action="baidu">
    <input type="submit" value="提交确认" v-on:click.prevent="submitClick">
  </form>

<!--  3.监听某个键盘的键帽 keyup
        加个 .enter只监听回车-->
  <input type="text" v-on:keyup.enter="keyUp">

<!--  4.  once修饰符的使用
          只能点一次-->
  <button @click.once="onceClick" value="once"></button>
</div>
<script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:"你好啊！！"
      },
      methods:{
        btnClick(){
          console.log("btnClick");
        },
        divClick(){
          console.log("divClick");
        },
        submitClick(){
          console.log("submitClick")
        },
        keyUp(){
          console.log("keyUp")
        },
        onceClick(){
          console.log("onceClick")
        }
      }
    })
  </script>
</body>
</html>